<template>
    <div class="xms-flex-wrap">
        <div class="xms-flex-middle">
            <div class="course-main">
                <div class="course-list">
                    <img :src="data.infos.image">
                    <div class="course-content">
                        <div>
                            <div class="course-title">{{data.infos.title}}</div>
                            <div class="font-grey font-12 mt5 ellipsis2">{{data.infos.brief}}</div>
                            <div class="font-18 font-red mt5">{{data.infos.new}}<span class="font-14">元</span>
                                <del class="font-12 font-grey ml5">{{data.infos.old}}元</del>
                            </div>
                        </div>
                        <div class="font-grey font-12">已售{{data.infos.sale}}</div>
                    </div>
                </div>
            </div>
            <div class="course-detail">
                <div class="detail-title">课程详情</div>
                <div class="detail-content" v-html="data.infos.content"></div>
            </div>
        </div>
        <div class="xms-flex-headerOrBottom">
            <van-button block @click="show=true">立即购买</van-button>
        </div>
        <van-popup v-model="show" style="width: 280px;height:150px;border-radius: 8px">
            <div class="flex-column align-items-center justify-content-around height-100">
                <van-field v-model="money" type="number" label="支付金额" placeholder="请输入付款金额">
                    <template #right-icon>元</template>
                </van-field>
                <div class="flex-row align-items-center mt5 order-money">
                    <van-button type="primary" @click="order">支付</van-button>
                    <van-button style="margin-left: 25px" type="default" @click="show=false">取消</van-button>
                </div>
                <div class="font-13 pd-lr-15" style="color: #ff6f00">注：商品可分两次付款，也可全额支付（全额支付后才能获得收益）</div>
            </div>
        </van-popup>
    </div>
</template>

<script>
    import {Dialog} from 'vant';

    export default {
        name: "Detail",
        data() {
            return {
                id: this.$route.query.id,
                show: false,
                money: '',
                url: {
                    infos: this.axiosUrl + 'goods/infos',
                    order: this.axiosUrl + 'Money/order',
                    found: this.axiosUrl + 'Money/found'

                },
                data: {
                    infos: {}
                }

            }
        },
        components: {},
        mounted() {
            let _this = this
            _this.infos()
            this.$wxConfig.share(this.$route.path)
        },
        methods: {
            infos() {
                let _this = this
                _this.$http.post(_this.url.infos, {id: _this.id}, (res) => {
                    _this.data.infos = res
                    // _this.money = parseInt(res.new)
                    _this.money = res.new
                })
            },
            order() {
                let _this = this
                if (_this.money > _this.data.infos.new) {
                    _this.$toast('支付金额不能超过订单金额')
                    return
                }
                // else if (_this.money < 1) {
                //     _this.$toast('支付金额不能小于1')
                //     return
                // }
                // Dialog.confirm({
                //     title: '提示',
                //     message: '确认支付' + parseInt(_this.money) + '元',
                // })
                Dialog.confirm({
                    title: '提示',
                    message: '确认支付' + _this.money + '元',
                })
                    .then(() => {
                        _this.$http.post(_this.url.order, {
                            goods: _this.data.infos.id,
                            // money: parseInt(_this.money),
                            money: _this.money,
                            market:localStorage.getItem('market')?localStorage.getItem('market'):undefined,
                            repeat:_this.data.infos.repeat
                        }, (res) => {
                           _this.found(res.id)
                           localStorage.removeItem('market')
                        })
                    })
                    .catch(() => {
                    });

            },
            found(order){
                let _this = this
                _this.$http.post(_this.url.found, {order}, (res) => {
                     _this.$wxPay(res.appId,res.timeStamp,res.nonceStr,res.package,res.signType,res.paySign)
                })
            },
        }
    };
</script>
<style lang="stylus" scoped>
    /deep/ .order-money .van-button {
        border-radius 3px
        width 100px
        height 35px
    }

    .xms-flex-wrap
        background white
        height 100vh

    .course-main
        .course-list
            border-bottom 1px solid #e5e5e5
            display flex
            flex-direction row
            padding 16px
            background white

            img
                display block
                width 150px
                height 120px

            .course-content
                margin-left 10px
                display flex
                flex-direction column
                justify-content space-between
                align-items flex-start

                .course-title
                    width 180px
                    white-space nowrap
                    overflow hidden
                    text-overflow ellipsis
                    font-size 15px

    .ellipsis2
        width 180px
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;

    .course-detail
        .detail-title
            font-size 14px
            padding 12px 16px
            background #f2f2f2


</style>
